﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        .reveal pre code {
            background-color: #120;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>小课堂</h3>
            <h3>【css-task2】margin与padding的区别是什么？</h3>
            <h3>分享人：吴昊杰</h3>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section style="text-align: left; font-size: 30px">
                <h3>什么是margin 什么是padding</h3>
                <p>
                    我们在进行网页制作时都会遇到为元素设定边距的情况，边距又分为内边距和外边距，即margin和padding.<br>

                    margin和padding是在html中的盒模型的基础上出现的，<br>

                    margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。<br>
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <h3>margin是什么？</h3>
                <p style="text-align: left; font-size: 30px">
                    CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School<br>

                    边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南<br>
                </p>
            </section>
            <section style="text-align: center; font-size: 30px">
                <h3>padding是什么？</h3>
                <p style="text-align: left; font-size: 30px">
                    padding 属性设置元素的内边距,属性定义元素边框与元素内容之间的空间。<br>
                    同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”<br>
                </p>
            </section>

            <section>
                <h3>Margin的特性</h3>
                margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。<br>
                margin只有一个值表示上右下左，如果 margin 只有两个值第一个值表示上下，第二个值为左右。<br>
                margin有三个值 表示上左右下，margin有四个值表示上下左右四个方向。
            </section>
            <section>
                <h3>padding的特性</h3>
                padding属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，<br>
                从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
            </section>

        </section>
        <section>
            <section>
                <h3>3.常见问题<br></h3>
            </section>
            <section>
                <p style="text-align: center">
                    1.什么是盒子模型。<br>
                    2.margin和padding的区别。<br>
                    3.用margin好还是用padding好。<br>
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                <h3>什么是盒子模型。</h3>
                <img src="../img/css-02-margin与padding的区别/装着猫的箱子.jpg" alt="" style="height: 250px" width="250px">
                <p>具备内容、填充、边框、边界这些属性，能包含其他元素的容器都是盒子。</p>
            </section>
            <section>
                <h3>margin和padding的区别。</h3>
                <p>我们以DIV为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)" </p>
            </section>
            <section>
                <h3>用margin好还是用padding好</h3>
                <p>何时应当使用margin：</p>
                <p>需要在border外侧添加空白时。
                    空白处不需要背景（色）时。
                    上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。</p>
                <p>何时应当时用padding：</p>
                <p>需要在border内测添加空白时。
                    空白处需要背景（色）时。
                    上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。</p>
            </section>
            <section>
                <h3>margin在块级元素</h3>
                <p>margin在块级元素下，他的性能可以完全体现，上下左右任你设定.</p>
                <h3>margin在行级元素</h3>
                <p>margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。</p>
            </section>
            <section>
                <h3>总结</h3>
                <p>margin属性可以应用于几乎所有的元素，除了表格显示类型。</p>
                <p>padding属性的使用1.需要在border内测添加空白时。
                    2.空白处需要背景（色）时。</p>
                <p>margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。</p>
            </section>
        </section>
        <section>
            <section>
                <h3>5.编码实战</h3>
            </section>
        </section>
        <section>
            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <h3>什么是margin折叠？</h3>
                <p>在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠，且产生的已合并的外边距被称为折叠外边距。 处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，则称之为相邻。</p>
            </section>
        </section>
        <section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section>
                <p >
                    参考一：
                    <a href="http://blog.csdn.net/dl429/article/details/40712529">margin的详细用法</a><br>
                    参考二：
                    <a href="https://jingyan.baidu.com/article/8065f87f81ee532331249820.html">怎么区分margin 和 padding的区别。</a><br>
                    参考三
                    <a href="https://ptteng.github.io/PPT/PPT/css-01-box.html">盒子模型知多少</a><br>
                    参考四
                    <a href="http://www.jianshu.com/p/549aaa5fabaa">margin为负值产生的影响和常见布局应用</a><br>
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>8.更多讨论</h3>
            </section>
        </section>
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                By
                <small style="vertical-align: middle">吴昊杰</small>
            </p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
